<template>
    <div class="tab_class">

        <div class="tabChange">
            <span></span>

            <span @click="tabChangeActive(index)" v-for="(title,index) in tabs"
                  :class="{tabChangeActiveClass:index == nowActive}">
                {{ title }}
            </span>

            <span></span>
        </div>

        <div class="list" v-show="nowActive === 0">
            <div class="list-left">
                <span
                    v-for="(item, index) in categoryList"
                    :key="index"
                    :class="{listLeftActive:index == curCatePos}"
                    @click="leftCateClick(index)"
                >{{item.name}}</span>
            </div>
            <div class="list-right" ref="box" id="cateBox">
                <div ref="elememt" v-for='(v, k) in categoryList' class="list-right-content" style="padding-bottom:20px;">
                    <p style="text-align: center;font-size: 16px;font-weight: bold;padding-bottom:10px;" :id="'cate-pos-' + k">{{v.name}}</p>
                    <van-row>
                        <van-col span="8" v-for="(item, i) in v.children" :key="i" @click="toItemList(item.id)">
                            <div style="width: 100%;padding: 5px 10px 0; text-align: center">
                                <img :src="item.iconUrl" :alt="item.name" style="width: 80%">
                            </div>
                            <p style="text-align: center;margin-top: 0px;padding-bottom: 10px;;font-size:12px;padding-top:5px;">{{item.name}}</p>
                        </van-col>
                    </van-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {catalogList, catalogCurrent} from '@/api/api';
    import {Search} from 'vant';

    export default {
        data() {
            return {
                nowActive: 0,
                tabs: [
                    '女生',
                    '男生',
                ],
                curCatePos: 0,
                cateOffsetTop: {},
                categoryList: [],
                currentCategory: {}
            };
        },

        mounted() {

        },

        created() {
            this.initData();
        },

        methods: {
            handleScroll() {
                let scrollT = this.$refs.box.scrollTop + document.documentElement.clientHeight / 2 - 50
                if (this.$refs.box.scrollTop < 50) {
                    this.curCatePos = 0
                    return
                }

                for (const i in this.cateOffsetTop) {
                    const posTop = this.cateOffsetTop[i]
                    if ((scrollT >= posTop - 10 && scrollT <= posTop + 10) && this.curCatePos != i) {
                        // console.log(i + '---posTop-->' + posTop + '-----scrollT-->' + scrollT)
                        this.curCatePos = i.substring(9)
                    }
                }
            },
            tabChangeActive(i) {
                this.nowActive = i;
            },
            initData() {
                catalogList().then(res => {
                    console.log(res)
                    let data = res.data.data;
                    this.categoryList = data.categoryList;
                    this.currentCategory = data.currentCategory;
                    // 初始化滚动
                    setTimeout(()=>{
                        for (let i = 0; i < this.categoryList.length; i++) {
                            const obj = document.getElementById('cate-pos-' + i)
                            this.cateOffsetTop['cate-pos-' + i] = obj.offsetTop;
                        }
                        window.addEventListener('scroll', this.handleScroll, true);
                    }, 1000)
                });
            },
            leftCateClick(idx){
                this.curCatePos = idx
                this.$refs.box.scrollTop = this.cateOffsetTop['cate-pos-' + idx] - document.documentElement.clientHeight / 2 + 50
            },
            changeCatalog(id, index) {
                document.getElementById("cate-pos-" + index).scrollIntoView();
                this.curCatePos = index
                catalogCurrent({id: id}).then(res => {
                    let data = res.data.data;
                    this.currentCategory = data.currentCategory;
                    this.currentSubCategoryList = data.currentSubCategory;
                });
            },
            toItemList(id) {
                this.$router.push({
                    name: 'category',
                    query: {keyword: '', itemClass: id}
                });
            }
        },
        components: {
            [Search.name]: Search,
        }
    };
</script>


<style lang="scss" scoped>
    @import '../../assets/scss/mixin';

    .tab_class {
        /*margin-top: 10px;*/
    }

    .tabChange {
        width: 100%;
        height: 50px;
        display: flex;
        background-color: #fff;

        span {
            width: 25%;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #999999;
        }

        .tabChangeActiveClass {
            color: #333333;
        }
    }

    .list {
        width: 100%;
        height: calc(100% - 50px);;
        background-color: #F6F6F6;
        display: flex;
        justify-content: center;

        .listLeftActive {
            color: #E86489;
            background-color: #fff;
        }

        .list-left {
            width: 100px;
            background-color: #F6F6F6;
            overflow-y: auto;
            overflow-y: scroll;

            span {
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                display: inline-block;
                height: 50px;
                line-height: 50px;
                text-align: center;
            }
        }

        .list-right {
            width: calc(100% - 100px);
            height: 100%;
            overflow-y: auto;
            overflow-y: scroll;
            background-color: #ffffff;
            padding-top: 10px;

            .list-right-content {
                width: 100%;
                height: auto;
            }

            .list-right-content:nth-last-of-type(1) {
                height: calc(100% + 10px)
            }
        }
    }

    /*.tab_class {*/
    /*    overflow: hidden;*/
    /*    background-color: #fff;*/
    /*}*/

    .height-fix {
        padding-bottom: 42px;
    }

    .tal_class_searchBox {
        position: relative;
    }

    .tal_class_searchMask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9;
    }

    .class_tree {
        position: relative;
        background-color: #fff;
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        height: 600px;
        box-sizing: border-box;
        top: 20px;
        overflow-y: auto;
    }

    .class_tree_nav {
        float: left;
        width: 100px;
        height: 600px;
        background-color: #fff;
        overflow: scroll;

        > li {
            //@include one-border;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border-left: 2px solid $bg-color;
            font-size: 16px;
            color: #000;
        }

        > li.active_nav {
            background-color: #fff;
            //border-left: 2px solid $red;
            color: $red;
        }
    }

    .class_tree_content {
        margin-left: 100px;
        height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;

        .class_tree_all {
            text-align: right;
            padding-right: 10px;
            padding-left: 10px;
            color: $font-color-gray;
            font-size: $font-size-small;
        }

        .van-icon-arrow {
            font-size: $font-size-small;
        }

        .class_tree_items_wrap {
            padding: 10px;
            margin-right: -3%;
            margin-top: 20px;
            text-align: center;

            > div {
                float: left;
                padding-right: 3%;
                box-sizing: border-box;
                width: 33.333%;
                margin-bottom: 20px;
            }

            img {
                max-width: 100%;
            }

            .class_tree_item_img {
                display: inline-block;
                max-width: 100%;
                width: 60px;
                height: 60px;
            }

            .class_tree_item_name {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 13px;
                margin-top: 5px;
            }
        }
    }
</style>
